<script setup lang="ts">
import {getBannerAPI} from '@/api/Home/index.js'
import {ref,onMounted,defineProps} from 'vue';
import Goods from '@/components/Goods.vue'
import useCategoryStore from '@/stores/layout.ts'
import {storeToRefs} from 'pinia'
const categoryStore = useCategoryStore()
const {list} = storeToRefs(categoryStore);
onMounted(()=>console.log(categoryStore.getCategory()));
const bannerList = ref([])
const getBanner = async ()=>{
   const res = await getBannerAPI()
   bannerList.value = res.result
}
const ShowItemId = ref()
onMounted(()=> getBanner())
// const category = ref([])
// const getCategroy = async ()=>{
//   await categoryStore.getCategory()
//   // category.value = categoryStore.list
//   for(let i in categoryStore.list){
//     category.value[i] = categoryStore.list[i]
//   }
//   console.log(category.value)
// }
// getCategroy()
const prop = defineProps({
  isCategory:{
    type:Boolean,
    default:true
  }
})
</script>

<template>
  <div class="banner">
    <el-carousel height="550px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <router-link :to="item.hrefUrl"><img :src="item?.imgUrl"/></router-link>
      </el-carousel-item>
    </el-carousel>

    <!-- 分类推荐 -->
    <div class="category" v-if="prop.isCategory">
      <ul>
        <li v-for="item in list" :key="item?.id"  @mouseenter="ShowItemId=item.id" @mouseleave="ShowItemId=-1">
            <!-- <p> {{ item.name }} {{ item?.children[0]?.name }}</p> -->
            <p >{{ item?.name }} <span>{{ item?.children[0]?.name }}</span> <span>{{ item?.children[1]?.name  }}</span></p>
<!-- -------------弹层 ------------------->
              <div class="layer" v-show="ShowItemId === item.id" @mouseenter="ShowItemId=item.id" @mouseleave="ShowItemId=-1">
                <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
                <div style="display: flex; flex-wrap: wrap;justify-content: space-evenly; height: calc(100% - 22px);">
                  <div class="good" v-for="good in item.goods" style="width: 26%;height: 33%;" >
                    <router-link to="">
                      <el-card shadow="hover" style="height: 100%;display: flex;">
                          <div class="goodCard">
                            <router-link to="">
                              <img :src="good.picture" style="width: 6vw;">
                            </router-link>
                            <div>
                              <p style="width:5vw; ">{{ good.desc }}</p>
                              <span>￥{{ good.price }}</span>
                            </div>
                          </div>
                      </el-card>
                    </router-link>
                  </div>
                </div>
              </div>
        </li>
      </ul>
      
    </div>
  </div>
</template>

<style scoped>
.banner{
    width: 100vw;
    height: 550px;
    background-color: #F5F5F5;
    position: relative;
}
.el-carousel,.category{
    width: 70vw;
    height: 550px;
    margin: 0 auto;
}
.el-carousel__item img{
  width: 100%;
  height: 100%;
}
.category{
  position:absolute;
  top:0;
  left: 15vw;
  height: 550px;
}
.category>ul{
  height:100%;
  width:12vw;
  position: relative;
  background-color: rgba(16, 16, 16, 0.701);
}
.category>ul>li{
  width:100%;
  display:flex;
  height: 11%;
  align-items: center;
}
.category>ul>li:hover{
  background-color:aquamarine
}
.category>ul>li>p{
  padding-left:20px;
  color: white;
}
.category .layer{
  position: absolute;
  width: calc(58vw );
  height:550px;
  left:12vw;
  top:0;
  background-color: rgba(253, 253, 253, 0.636);
}

.layer .good a{
  display: inline-block;
}
.layer .good .el-card .el-card__body,.goodCard{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
.category .layer a.router-link-active{
  text-decoration:none;
}
.goodCard div{
  margin-left: 15px;
}
.goodCard div span{
  color: red;
}
.category .layer a.router-link-active.router-link-exact-active{
  width: 100%;
}
</style>
